<template>
  <div class="content">
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
	
	 <div class="class-list-page intergralClass-list-page" :style="{'height':systemInfo.screenHeight+'px'}">
	         <div style="height:100%">
	             <div class="class-list-div" style="height:100%">
	                 <div class="left">
	                     <div class="left-item" :class="{'active' : cutIndex == index}" 
						 :key="index"
						 @click="changeRight(index)" 
						 v-for="(Item,index) in classList">{{ Item['className'] }}</div>
	                 </div>
	                 <div class="right" style="height: 100%;padding-bottom: 80px;box-sizing: border-box;">
	                     <div class="right-con" :style="{'display': cutIndex == index ? 'block' : 'none'}" style="overflow: hidden;" v-for="(Item,index) in classList" :key="index">
	                         <div class="right-item" @click="toGoodsList(childrenItem)" v-for="childrenItem in Item['childrenList']" :key="childrenItem.className">
	                             <img class="img" :src="childrenItem['classImage']" mode="aspectFit"/>
	                             <div class="name">{{ childrenItem['className'] }}</div>
	                         </div>
	                     </div>
	 
	                 </div>
	             </div>
	         </div>
		<bnavbar ref="bnavbar"></bnavbar>
    </div>
  
	
  </div>
</template>

<script>
  import bnavbar from './components/b-navbar';
  import{integralClassList} from '@/config/points.js'
  import {pageSeo} from '@/config/api.js'
  import store from '@/store';
  export default {
    components: {
       bnavbar

    },
    data() {
      return {
			keywords:'',
			showRight:false,
			classList:[],
			cutIndex:0,
			showSearch:false,
			overlay:false,
			spinShow:false,
			active:1,
			systemInfo:{
			    bottomSafeAreaHeight :0,
				screenHeight:0
			},
      }
    },

	async onLoad(options) {
    	await this.$onLaunched;	
        this.getPageInfo();
	    this.$refs.bnavbar.init(1,'#6C6CEA')
		this.systemInfo.bottomSafeAreaHeight = uni.getSystemInfoSync().safeAreaInsets.bottom
		let statusBarHeight = 0
		const res = uni.getSystemInfoSync()
			if(res.platform==='ios'){
				statusBarHeight= 44+res.statusBarHeight
			}else if(res.platform==='android'){
				statusBarHeight=48+res.statusBarHeight
			}
			console.log("statusBarHeight",statusBarHeight)
		this.systemInfo.screenHeight = uni.getSystemInfoSync().windowHeight-uni.getSystemInfoSync().safeArea.top
			   
    },
	
	async onShow() {
		// #ifdef H5
		pageSeo({pageType: 'indexPage'}).then((res)=>{
			document.title = res.pageTitle;
		})
		// #endif	
	},

	
    methods: {
		
		changeRight(i){
			this.cutIndex = i;
		},

		//去商品列表页
		toGoodsList(item){
			uni.navigateTo({
				url: 'intergralGoodsList?classId='+item.classId + '&className='+item.className
			})
		},


		getPageInfo(){
			this.spinShow = true;
			integralClassList().then((res)=>{
				this.classList = res;
				this.spinShow = false;
			}).catch((err)=>{
				this.spinShow = false;
			})
		},
		
	},
	
	
	

  }
</script>


<style lang="scss">
@import '@/style/common.scss';
.class-list-page{
  background: $background-color;
  .search-div{
    height:54px;
    position: relative;
  }
  .search-div:after{
    border-bottom:1px solid #eee
  }
  .class-list-div{
    height:calc(100% - 54px);
	@include flexbox(flex-start,flex-start);
    .left{
      width:90px;
      height:100%;
      overflow: auto;
      font-size:$m-font;
      color:$font-color;
      .left-item{
        height:55px;
        padding-left:16px;
        line-height: 55px;
      }
      .left-item.active{
        background: #fff;
        border-left:2px solid $theme-color;
      }

    }
    .right{
      width:calc(100% - 90px);
      background: #fff;
      height:100%;
      overflow: auto;
      padding:0 10px;
	  padding-bottom:80px;
      .right-item{
        height:22px;
        line-height: 22px;
        background: $background-color;
        border-radius: 11px;
        padding:0 10px;
        font-size:$s-font;
        color:$font-color;
        display: inline-block;
        margin-left:16px;
        margin-bottom:16px;
        min-width:80px;
        text-align: center;
      }
    }
  }

}
.intergralClass-list-page.class-list-page{
	overflow: hidden;
  .class-list-div .right{
    padding:16px 12px;
    .right-item{
      width: 32%;
      float: left;
      text-align: center;
      background: none;
      height:auto;
      margin-left:0;
      margin-bottom:0;
      cursor: pointer;
      .img{
        width:40px;
        height:40px;
		display: inline-block;
      }
      .name{
        color: #333;
        height: 35px;
        margin-top: 2px;
      }
    }
  }

}
</style>


    
    
